
/**
 * 春季续班-概览看板
 * @author wl
 */
import React, {useRef, useState, useEffect, useMemo} from 'react';
import {Card, Radio, Modal, Row, Col} from 'antd';
import CommonSearchBar from '~/page/FineBi/common/CommonSearchBar';
import CommonTitle from '~/page/FineBi/common/Title';
import {convertSearcherParams} from '~/page/FineBi/utils/convert';
import DataText from '~/page/FineBi/common/DataText';
import Carousel from '~/page/FineBi/common/Carousel';
import UserRoundTabs from '~/page/FineBi/common/UserRoundTabs';
import {userRoundIdx, initUserRoundIdx} from '~/utils/const';

import {
    querySelectOptions,
    fetchData
} from '~/service/refundReport';
import DataCard from './comps/DataCard';
import Part1 from './comps/Part1';
import Part2 from './comps/Part2';
import Part3 from './comps/Part3';
import Part4 from './comps/Part4';
import Part5 from './comps/Part5';
import Part6 from './comps/Part6';
import Part7 from './comps/Part7';
import Part8 from './comps/Part8';


import {
    cardsConfig,
    searchConfig,
    initialValues,
    dIdConfig,
    initDimensionAndValues
} from './config';
import UserRoundIdx from '../common/UserRoundTabs';

const CentralXubanReport = props => {
    const formRef = useRef({});
    const [selectOptions, setSelectOptions] = useState({});
    const [dimensionAndValues, setDimensionAndValues] = useState(initDimensionAndValues);
    const [userRoundValue, setUserRoundValue] = useState(initUserRoundIdx);

    const handleOk = fieldsValue => {
        const params = convertSearcherParams(fieldsValue);

        setDimensionAndValues([...params, {...initDimensionAndValues[0], value: [userRoundValue]}]);
    };

    const handleReset = e => {
        setDimensionAndValues([{...initDimensionAndValues[0], value: [userRoundValue]}]);
    };

    // 选项查询
    const handleFetchOptions = options => {
        const {key, searchKey, pager, isGetingMore, options: curOptions, unitId, fieldsValue} = options;

        let permissions = searchConfig.map(item => ({
            dimensionId: `${item.unitId}_${item.key}`,
            dimensionName: item.key,
            filterItems: Array.isArray(fieldsValue[item.key])
                ? fieldsValue[item.key]
                : fieldsValue[item.key] == null
                    ? []
                    : [fieldsValue[item.key]]
        }));

        permissions = permissions.filter(item => (item.filterItems?.length && item.dimensionName !== userRoundIdx));
        permissions.push({...initDimensionAndValues[0], value: [userRoundValue]});

        const params = {
            pager,
            dimensionId: `${unitId}_${key}`,
            dimensionName: key,
            searchKey,
            permissions,
            unitId
        };

        return querySelectOptions(params).then(res => {
            const {data, pager} = res;
            let options =
                data.map(item => ({
                    key: item,
                    value: item,
                    label: item
                })) || [];
            // 分页时，累加展示
            if (isGetingMore) {
                options = curOptions.concat(options);
            }
            setSelectOptions({key, options, pager});

            return (data || []);
        });
    };

    const handleItemChange = formItem => {
        const form = formRef.current?.formFields;
        const prop = Object.keys(formItem)[0];
        const values = formItem[prop];
        const newValues = values.filter(item => item !== '全部');

        form.setFieldsValue({[prop]: newValues});
    };

    const handleRadioChange = e => {
        const {value} = e.target;
        setUserRoundValue(value);

        let filterDimension = dimensionAndValues.filter(item => item.dimensionName !== userRoundIdx);
        filterDimension = filterDimension.map(ele => ({...ele, value: ['全部']}));
        const newDimensionAndValues = filterDimension.concat([{...initDimensionAndValues[0], value: [value]}]);

        setDimensionAndValues(newDimensionAndValues);
        formRef.current.formFields.resetFields();
    };

    return (
        <div className="center-xuban">
            <Carousel />
            <CommonTitle
                title="续班总览"
                iconDom={(
                    <UserRoundTabs
                        onRadioChange={handleRadioChange}
                    />
                )}
            />
            {/* <div style={{padding: '0 24px'}}>
                <DataText
                    dId="Renewal_Overview_Title"
                    unitId="Renewal_Overview_Title_text"
                />
            </div> */}
            {/* <Card bordered={false} style={{marginTop: '24px', marginBottom: '8px'}}>
            </Card> */}
            <Card bordered={false} style={{marginTop: '24px', marginBottom: '8px'}}>
                <CommonSearchBar
                    noCache
                    config={searchConfig}
                    initialValues={initialValues}
                    onOk={handleOk}
                    onReset={handleReset}
                    onfetchOptions={handleFetchOptions}
                    selectOptions={selectOptions}
                    onItemChange={handleItemChange}
                    ref={formRef}
                />
            </Card>
            <Card bordered={false}>
                <DataText
                    dId="Renewal_Overview_Title"
                    unitId="Renewal_Overview_Title_text"
                />
                <Row>
                    {cardsConfig.map(card => (
                        <Col key={card.id} span={8}>
                            <DataCard
                                dId={card.id}
                                dimensionAndValues={dimensionAndValues}
                                unitId={card.unitId}
                                isRatio={card.isRatio}
                            />
                        </Col>
                    ))}
                </Row>
                <Part1
                    dId={dIdConfig.part1.dId}
                    unitId={dIdConfig.part1.unitId}
                    dimensionAndValues={dimensionAndValues}
                    fetchData={fetchData}
                />
                <Row>
                    <Col span="12">
                        <Part2
                            dId={dIdConfig.part2.dId}
                            unitId={dIdConfig.part2.unitId}
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                    <Col span="12">
                        <Part3
                            dId={dIdConfig.part3.dId}
                            unitId={dIdConfig.part3.unitId}
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                </Row>
                <Part4
                    dId={dIdConfig.part4.dId}
                    unitId={dIdConfig.part4.unitId}
                    dimensionAndValues={dimensionAndValues}
                />
                <Part5
                    dId={dIdConfig.part5.dId}
                    unitId={dIdConfig.part5.unitId}
                    dimensionAndValues={dimensionAndValues}
                />
                {/* <Row>
                    <Col span="12">
                        <Part4
                            dId={dIdConfig.part4.dId}
                            unitId={dIdConfig.part4.unitId}
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                    <Col span="12">
                        <Part5
                            dId={dIdConfig.part5.dId}
                            unitId={dIdConfig.part5.unitId}
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                </Row> */}
                <Row>
                    <Col span="12">
                        <Part6
                            dId={dIdConfig.part6.dId}
                            unitId={dIdConfig.part6.unitId}
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                    <Col span="12">
                        <Part7
                            dId={dIdConfig.part7.dId}
                            unitId={dIdConfig.part7.unitId}
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                </Row>

                <Part8
                    dId={dIdConfig.part8.dId}
                    unitId={dIdConfig.part8.unitId}
                    dimensionAndValues={dimensionAndValues}
                />

            </Card>
        </div>
    );
};

export default CentralXubanReport;
